<template>
	<view class="main-cont">
		<!-- <view class="box box-pack-between box-align-center padd20 bgcfff">
			<view class="">
				已完成:7人 (共{{list.length}})
			</view>
		</view> -->
		<view class="stu-main" v-if="list.length !=0">
			<view class="list box box-align-center">
				<view class="sort">排名</view>
				<view class="name">姓名</view>
				<view class="check">观看进度</view>
				<!-- <view class="score">时间</view> -->
			</view>
			<view class="list box box-align-center" v-for="(item, index) in list" :key="index">
				<view class="sort box box-align-center box-pack-center" v-if="index<=2">
					<u-image src="@/static/home/sort_1.png" width="38rpx" height="45rpx" v-if="index == 0"></u-image>
					<u-image src="@/static/home/sort_2.png" width="38rpx" height="45rpx" v-if="index == 1"></u-image>
					<u-image src="@/static/home/sort_3.png" width="38rpx" height="45rpx" v-if="index == 2"></u-image>
				</view>
				<view class="sort sort box box-align-center box-pack-center" v-if="index>2">{{parseInt(index)+1}}</view>
				<view class="name box box-align-center box-pack-start">
					<u-avatar :src="item.icon" mode="circle" size="72"></u-avatar>
					<view class="ml10 stu-name">
						{{item.name}}
					</view>
				</view>
				<view class="check">{{item.bfb+'%'}}</view>
				<!-- <view class="score">{{resetTime(item.time)}}</view> -->
			</view>
		</view>
		<no-data class="data" title="还没有学生观看记录" v-else></no-data>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					color: "#fff",
					width: "147rpx",
					height: "46rpx",
					background: "#626BF1",
					fontSize: "24rpx"
				},
				thStyle: {
					backgroundColor: "#fff"
				},
				list: [],
				cousid: '',
				sectionid: '',
				planid: ''
			}
		},
		onLoad(opt) {
			this.cousid = opt.cousid;
			this.sectionid = opt.sectionid;
			this.planid = opt.planid;
			this.$nextTick(res => {
				this.getStuList()
			})
		},
		methods: {
			getStuList() {
				let opts = {
					url: '/yclasscoustask/desc',
					method: 'post'
				};
				let params = {
					sectionid: this.sectionid,
					cousid: this.cousid,
					planid: this.planid
				};
				this.$api.post(opts, params).then(res => {
					//console.log(res);
					this.list = res.list;
				})
			},
			goIndex(index) {
				this.current = index
				uni.switchTab({
					url: this.list[index].pagePath
				})
			},
			// 时间戳转换
			resetTime(timestamp) {
				let time = new Date(timestamp);
				let year = time.getFullYear();
				let month = time.getMonth() + 1;
				let date = time.getDate();
				let hours = time.getHours();
				let minute = time.getMinutes();
				let second = time.getSeconds();

				if (month < 10) {
					month = "0" + month;
				}
				if (date < 10) {
					date = "0" + date;
				}
				if (hours < 10) {
					hours = "0" + hours;
				}
				if (minute < 10) {
					minute = "0" + minute;
				}
				if (second < 10) {
					second = "0" + second;
				}
				return hours + ":" + minute + ":" + second;
			}
		}
	}
</script>

<style scoped lang="scss">
	.main-cont {
		// margin: 20rpx 14rpx;
		width: 722rpx;
		height: 100%;
		overflow-y: auto;
		background-color: #fff;

		.bgcfff {
			background-color: #fff;
		}

		.bottom {
			width: 100%;
		}

		.stu-main {
			padding: 20rpx 50rpx;
		}

		.list {
			padding: 20rpx 0;
			width: 100%;
			height: 100%;
		}

		.check {
			width: 150rpx;
			text-align: center;
		}

		.sort {
			width: 60rpx;
			text-align: center;
		}

		.name {
			padding: 0 40rpx;
			text-align: left;
			width: 450rpx;
			.stu-name{
				width: 380rpx;
				height: 40rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: normal;
			}
		}

		.score {
			text-align: center;
			width: 120rpx;
		}

	}
	// .data{
	// 	margin-top: -50rpx;
	// }
</style>
